<!--
 * @Author: hutong huareu980@163.com
 * @Date: 2023-06-06 19:02:21
 * @LastEditors: hutong huareu980@163.com
 * @LastEditTime: 2023-06-19 17:24:41
 * @FilePath: /smart-web-app/components/job.vue
 * @Description: 
-->
<template>
  <div class="job-box">
    <h3>
      <div>
        {{ t("job.title") }}
        <span
          >{{ t("job.gong") }} {{ tableData.total }}
          {{ t("job.positions") }}</span
        >
      </div>
      <div>
        <el-button
          :type="tableData.params.type === 1 ? 'primary' : 'default'"
          @click="tableData.params.type = 1"
          >{{ t("job.type.shixi") }}</el-button
        >
        <el-button
          :type="tableData.params.type === 2 ? 'primary' : 'default'"
          @click="tableData.params.type = 2"
          >{{ t("job.type.xiaoyuan") }}</el-button
        >
        <el-button
          :type="tableData.params.type === 3 ? 'primary' : 'default'"
          @click="tableData.params.type = 3"
          >{{ t("job.type.shixi") }}</el-button
        >
      </div>
    </h3>
    <div class="job-list">
      <div class="job-item" v-for="item in data.result.data" :key="item">
        <NuxtLink :to="localePath(`/job/${item.id}`, locale)">
          <div class="job-title">
            {{ item.position_name }}
          </div>
          <div class="job-info">
            {{ t("job.update") }} {{ item.update_time }}
            <span>｜</span>
            {{ item.position_type }}
            <span>｜</span>
            {{ item.position_address }}
          </div>
        </NuxtLink>
      </div>
      <el-pagination
        @size-change="onHandleSizeChange"
        @current-change="onHandleCurrentChange"
        class="mt15"
        :pager-count="5"
        :page-sizes="[10, 20, 30]"
        v-model:current-page="tableData.params.page_num"
        background
        v-model:page-size="tableData.params.page_size"
        layout="prev, pager, next"
        :total="tableData.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
˜

<script setup lang="ts">
const { t, locale } = useI18n();
const localePath = useLocalePath();
const tableData = reactive<any>({
  total: 0,
  params: {
    page_num: 1,
    page_size: 10,
    position_name: "",
    position_address: "",
    lang: locale,
    type: "",
  },
});

const { data, refresh } = <any>await useGetFetch("/p", tableData.params);
tableData.total = data.value?.result?.count ?? 0;
// 分页改变
const onHandleSizeChange = (val: number) => {
  tableData.params.page_size = val;
  // refresh();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
  tableData.params.page_num = val;
  // refresh();
};
</script>
<style scoped lang="scss">
.job-box {
  line-height: normal;
  h3 {
    font-weight: normal;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    span {
      font-size: 12px;
      color: #ee7f31;
      background-color: #fef7f1;
      padding: 4px 10px;
    }
  }
  .job-list {
    .job-item {
      padding: 20px 0;
      cursor: pointer;
      .job-title {
        font-weight: bold;
        a {
          color: #333;
        }
      }
      .job-info {
        font-size: 14px;
        margin-top: 6px;
        color: gray;
      }
    }
  }
}
</style>
